
//主轴方向

$("#row").click(function(){
    $(".box1").css("flex-direction","row")
});
$("#row-reverse").click(function(){
    $(".box1").css("flex-direction","row-reverse")
});
$("#column").click(function(){
    $(".box1").css("flex-direction","column")
});
$("#column-reverse").click(function(){
    $(".box1").css("flex-direction","column-reverse")
});

//是否换行

$("#nowrap").click(function(){
    $(".box1").css("flex-wrap","nowrap")
});
$("#wrap").click(function(){
    $(".box1").css("flex-wrap","wrap")
});
$("#wrap-reverse").click(function(){
    $(".box1").css("flex-wrap","wrap-reverse")
});


//对齐方式

$("#flex-start").click(function(){
    $(".box1").css("justify-content","flex-start")
});
$("#flex-end").click(function(){
    $(".box1").css("justify-content","flex-end")
});
$("#center").click(function(){
    $(".box1").css("justify-content","center")
});
$("#space-between").click(function(){
    $(".box1").css("justify-content","space-between")
});
$("#space-around").click(function(){
    $(".box1").css("justify-content","space-around")
});

//竖轴对齐方式
$("#flex-start1").click(function(){
    $(".box1").css("align-items","flex-start")
});
$("#flex-end1").click(function(){
    $(".box1").css("align-items","flex-end")
});
$("#center1").click(function(){
    $(".box1").css("align-items","center")
});
$("#baseline").click(function(){
    $(".box1").css("align-items","baseline")
});
$("#stretch").click(function(){
    $(".box1").css("align-items","stretch");
    $(".box1item").css("height","auto");

    setInterval(function(){
        $(".box1item").css("height","70px");
    },2000)
});

//-------------------------------------------------------------

// $("#ok").click(function(){
//     console.log($("#item").val())
// })



$("#ok").click(function(){
    let item = $("#item").val() - 1;
    let order = $("#order").val();

    console.log(item,order)

    $(".box1item").eq(item).css("order",order)
})




$("#ok2").click(function(){
    let item2 = $("#item2").val() - 1;
    let flexgrow = $("#flex-grow").val();

    $(".box1item").eq(item2).css("flex-grow",flexgrow)
})






